<template>
  <div>
    <!--  -->
    <!-- default,cycle,SE,appoint,Nodefault 通配符 周期 起始 指定 不指定 -->
    <!-- <el-radio-group v-model="keyname">
      <template v-for="item in defaultConfigKeyName()">
        <el-radio :key="item" v-if="item == 'default'" :label="item"> 通配符 * </el-radio>
        <el-radio :key="item" v-if="item == 'Nodefault'" :label="item"> 不指定 </el-radio>
        <el-radio :key="item" v-else-if="item == 'cycle'" :label="item">
          从<el-input-number
            v-model="cycleValue.start"
            controls-position="right"
            @change="cycleBeforeChange"
            :min="cycleConfig.Min"
            :max="cycleConfig.beforeNbMax"
            size="mini"
          ></el-input-number>
          -
          <el-input-number
            v-model="cycleValue.end"
            controls-position="right"
            :min="cycleValue.start + 1"
            :max="cycleConfig.afterNbMax"
            size="mini"
          ></el-input-number
          >{{ name }}周期执行
        </el-radio>
        <el-radio :key="item" v-else-if="item == 'SE'" :label="item">
          从第<el-input-number
            v-model="SEValue.start"
            controls-position="right"
            @change="SEBeforeChange"
            :min="cycleConfig.Min"
            :max="cycleConfig.beforeNbMax"
            size="mini"
          ></el-input-number
          >{{ name }}开始,每
          <el-input-number
            v-model="SEValue.end"
            controls-position="right"
            :min="cycleConfig.Min"
            :max="cycleConfig.afterNbMax"
            size="mini"
          ></el-input-number
          >{{ name }}执行一次
        </el-radio>
        <el-radio :key="item" v-else-if="item == 'appoint'" :label="item">
          <div class="mr-10 inline-block">指定</div>
          <div class="inline-block">
            <el-checkbox-group v-model="checkList">
              <el-checkbox :label="v" v-for="v in appointCheckBox()" :key="v"></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-radio>
        <el-radio :key="item" v-else-if="item == 'year'" :label="item">
          从<el-input-number
            v-model="yearValue.start"
            controls-position="right"
            @change="yearBeforeChange"
            :min="yearConfig.Min"
            size="mini"
          ></el-input-number>
          -
          <el-input-number
            v-model="yearValue.end"
            controls-position="right"
            :min="yearValue.start + 1"
            size="mini"
          ></el-input-number
          >{{ name }}
        </el-radio>
      </template>
    </el-radio-group> -->
    <div class="flex flex-center mb-20">
      <span class="mr-10">类型</span>
      <el-radio-group v-model="keyname" size="mini">
        <template v-for="item in defaultConfigKeyName()">
          <el-radio-button :key="item" v-if="item == 'default'" :label="item">{{ indexName(item) }}</el-radio-button>
          <el-radio-button :key="item" v-if="item == 'Nodefault'" :label="item">
            {{ indexName(item) }}
          </el-radio-button>
          <el-radio-button :key="item" v-if="item == 'cycle'" :label="item">{{ indexName(item) }}</el-radio-button>
          <el-radio-button :key="item" v-if="item == 'SE'" :label="item">{{ indexName(item) }}</el-radio-button>
          <el-radio-button :key="item" v-if="item == 'appoint'" :label="item">{{ indexName(item) }}</el-radio-button>
          <el-radio-button :key="item" v-if="item == 'year'" :label="item">{{ indexName(item) }}</el-radio-button>
        </template>
      </el-radio-group>
    </div>
    <div class="flex flex-center" v-if="keyname != 'default' && keyname != 'Nodefault'">
      <span class="mr-10" style="white-space: nowrap">{{ indexName(keyname) }}</span>
      <template v-if="keyname == 'cycle'">
        <el-input-number v-model="cycleValue.start" controls-position="right" @change="cycleBeforeChange"
          :min="cycleConfig.Min" :max="cycleConfig.beforeNbMax" size="mini"></el-input-number>
        <span class="pl-5 pr-5">-</span>
        <el-input-number v-model="cycleValue.end" controls-position="right" :min="cycleValue.start + 1"
          :max="cycleConfig.afterNbMax" size="mini"></el-input-number>{{ name }}
      </template>
      <template v-if="keyname == 'SE'">
        <el-input-number v-model="SEValue.start" controls-position="right" @change="SEBeforeChange"
          :min="cycleConfig.Min" :max="cycleConfig.beforeNbMax" size="mini"></el-input-number>
        <span class="pl-5 pr-5">{{ name }}开始,每</span>
        <el-input-number v-model="SEValue.end" controls-position="right" :min="cycleConfig.Min"
          :max="cycleConfig.afterNbMax" size="mini"></el-input-number><span class="pl-5 pr-5">{{ name }}执行一次</span>
      </template>
      <template v-if="keyname == 'appoint'">
        <el-checkbox-group v-model="checkList" @change="changeBox">
          <el-checkbox :label="v" v-for="v in appointCheckBox()" :key="v"></el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-if="keyname == 'year'">
        从<el-input-number v-model="yearValue.start" controls-position="right" @change="yearBeforeChange"
          :min="yearConfig.Min" size="mini"></el-input-number>
        <span class="pl-5 pr-5">-</span>
        <el-input-number v-model="yearValue.end" controls-position="right" :min="yearValue.start + 1" size="mini">
        </el-input-number>{{ name }}
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cronson',
  props: {
    name: { type: String, default: '' },
    defaultConfig: { type: Object, default: () => {} },
  },
  data() {
    return {
      keyname: 'default',
      cycleConfig: {
        Min: 0,
        beforeNbMax: 58,
        afterNbMax: 59,
      },
      cycleValue: {
        start: 1,
        end: 2,
      },
      SEValue: {
        start: 1,
        end: 2,
      },
      yearConfig: {
        Min: new Date().getFullYear(),
      },
      yearValue: {
        start: 1,
        end: 1,
      },

      checkList: [],
    }
  },
  watch: {
    defaultConfig: {
      handler(n, o) {
        console.log(n)
      },
    },
    SEValue: {
      deep: true,
      handler() {
        this.dealWithDate()
      },
    },
    yearValue: {
      deep: true,
      handler() {
        this.dealWithDate()
      },
    },
    cycleValue: {
      deep: true,
      handler() {
        this.dealWithDate()
      },
    },

    keyname: {
      immediate: true,
      handler(n, o) {
        if (n != o) {
          this.$emit('update', { name: this.name, value: n })
          this.dealWithDate()
        }
      },
    },
  },
  methods: {
    changeBox(v) {
      this.dealWithDate()
    },
    dealWithDate() {
      let index = ['秒', '分', '时', '天', '月', '年'].findIndex((el) => el == this.name)
      let value = '*'
      switch (this.keyname) {
        case 'default':
          value = '*'
          break
        case 'Nodefault':
          value = '?'
          break
        case 'cycle':
          value = `${this.cycleValue.start}-${this.cycleValue.end}`
          break
        case 'SE':
          value = `${this.SEValue.start}/${this.SEValue.end}`
          break
        case 'appoint':
          let arr = this.checkList.sort()
          arr = arr.map((el) => (el.charAt(0) == '0' ? (el = el.charAt(1)) : (el = el)))
          value = arr.join(',')
          if (value.length == 0) value = '*'
          break
        case 'year':
          value = `${this.yearValue.start}-${this.yearValue.end}`
          break
      }
      if (index == 5) index++
      if (index !== -1) this.$emit('change', { index, value, keyname: this.keyname })
    },

    defaultDealWithDate(index, value) {
      if (value.indexOf(',') != -1) {
        this.checkList = value.split(',')
        this.keyname = 'appoint'
      } else if (value.indexOf('/') != -1) {
        let arr = value.split('/')
        this.SEValue.start = parseInt(arr[0])
        this.SEValue.end = parseInt(arr[1])

        // this.cycleConfig.afterNbMax = this.cycleValue.end + 1
        this.keyname = 'SE'
      } else if (value.indexOf('-') != -1) {
        let arr = value.split('-')
        this.cycleValue.start = parseInt(arr[0])
        this.cycleValue.end = parseInt(arr[1])

        if (index <= 5) this.keyname = 'cycle'
        else this.keyname = 'year'
      } else if (value == '?') {
        this.keyname = 'Nodefault'
      } else {
        this.keyname = 'default'
      }
    },

    defaultConfigKeyName() {
      if (this.defaultConfig.key) {
        return this.defaultConfig.key.split(',')
      } else {
        return []
      }
    },
    appointCheckBox() {
      let arr = []
      switch (this.name) {
        case '秒':
          for (let i = 0; i <= 59; i++) {
            arr.push(i < 10 ? '0' + i : i.toString())
          }
          break
        case '分':
          for (let i = 0; i <= 59; i++) {
            arr.push(i < 10 ? '0' + i : i.toString())
          }
          break
        case '时':
          for (let i = 0; i <= 23; i++) {
            arr.push(i < 10 ? '0' + i : i.toString())
          }
          break
        case '天':
          for (let i = 1; i <= 31; i++) {
            arr.push(i < 10 ? '0' + i : i.toString())
          }
          break
        case '月':
          for (let i = 1; i <= 12; i++) {
            arr.push(i < 10 ? '0' + i : i.toString())
          }
          break
      }
      return arr
    },
    isHaveKeyName(keyName) {
      let arr = this.defaultConfigKeyName()
      return arr.some((e) => e == keyName)
    },
    cycleBeforeChange(num) {
      if (num >= this.cycleValue.end) {
        this.cycleValue.end = num++
      }
    },
    SEBeforeChange(num) {
      if (num >= this.SEValue.end) {
        this.SEValue.end = num++
      }
    },
    yearBeforeChange(num) {
      if (num >= this.yearValue.end) {
        this.yearValue.end = num++
      }
    },
    indexName(keyName) {
      let obj = {
        default: '任意值',
        Nodefault: '不指定',
        cycle: '范围',
        SE: '间隔',
        appoint: '指定',
        year: '指定',
      }
      return obj[keyName]
    },
  },
  created() {
    switch (this.name) {
      case '秒' || '分':
        this.cycleConfig.beforeNbMax = 58
        this.cycleConfig.afterNbMax = this.cycleConfig.beforeNbMax + 1
        break
      case '时':
        this.cycleConfig.beforeNbMax = 22
        this.cycleConfig.afterNbMax = this.cycleConfig.beforeNbMax + 1
        break
      case '天':
        this.cycleConfig.Min = 1
        this.cycleConfig.beforeNbMax = 30
        this.cycleConfig.afterNbMax = this.cycleConfig.beforeNbMax + 1
        break
      case '月':
        this.cycleConfig.Min = 1
        this.cycleConfig.beforeNbMax = 11
        this.cycleConfig.afterNbMax = this.cycleConfig.beforeNbMax + 1
        break
    }
  },
}
</script>

<style lang="scss" scoped>
// :deep .el-radio {
//   display: block;
//   padding: 10px;
// }
:deep(.el-checkbox:last-of-type) {
  margin-right: 30px;
}
// :deep .el-checkbox-group {
//   display: flex;
//   flex-wrap: wrap;
// }
</style>
